import { useState } from 'react'
import styles from './Login.module.css'
import { LoginForm } from '../../types/user'
import { useNavigate } from 'react-router-dom'

export default function Login () {
  const [form, setForm] = useState<LoginForm>({ username: '', password: '' })

  const navigate = useNavigate()

  const changeValue = (e: any) => {
    // 对象的解构、属性名表达式
    setForm({
      ...form,
      [e.target.name]: e.target.value
    })
  }

  const login = () => {
    if (form.username === 'admin' && form.password === '123') {
      navigate('/layout')
    } else {
      alert('用户名或是密码错误~')
    }
  }

  return (
    <div className={styles['login-container']}>
      <p>
        用户名：
        <input value={form.username} name='username' onChange={changeValue} />
      </p>
      <p>
        密码：
        <input value={form.password} name='password' onChange={changeValue} />
      </p>
      <button onClick={login}>登录</button>
    </div>
  )
}
